<template>
    <div style="height:100%;">
        <navbar class="header-title-01 header-search-box">
            <template #left>
                <span class="iconfont icon-left head-left" @click="backToFind"></span>
            </template>
            <template #title>
                <div class="header-btn-search">
                    <router-link tag="div" to="/search">
                        <span>
                            {{ $t("button_search") }}
                        </span>
                    </router-link>
                </div>
            </template>
        </navbar>
        <div class="content">
            <div class="view-body">
                <!--筛选-->
                <div class="header-select">
                    <van-dropdown-menu active-color="#075ebb">
                        <!-- 问题分类 -->
                        <van-dropdown-item :title="primaryTitle" @open="selectedClick1()" ref="queRef">
                            <template #default>
                                <div class="firstCata" v-show="primaryClassification">
                                    <van-cell :title="$t('type_all_title')" :class="{'cur': selectClassificationOne === '0'}" @click="knowSelectClassifyAll()">
                                        <template #right-icon >
                                                <van-icon name="success" class="cur" v-if="selectClassificationOne === '0'" />
                                        </template>
                                    </van-cell>
                                    <van-cell-group class="firstCata" v-for="classification in knowClassifications" :key="classification.kcaId" @click="knowSelectClassificationOne(classification.kcaId, classification.childKnowCatalogList.length, classification.kcaTitle)">
                                        <van-cell :title="classification.kcaTitle" border :class="{'cur': selectClassificationOne === classification.kcaId}" >
                                            <template #right-icon >
                                                <van-icon name="arrow" v-if="classification.childKnowCatalogList.length > 0"/>
                                                <van-icon name="success" class="cur" v-if="classification.childKnowCatalogList.length <= 0 && selectClassificationOne === classification.kcaId" />
                                            </template>
                                        </van-cell>
                                    </van-cell-group>
                                </div>
                                <div class="secondCata" v-show="secondaryClassification" >
                                    <van-cell :title="$t('know_back_to_previous')" @click="backToPrevious()"/>
                                    <van-cell-group class="firstCata"  v-for="classification in knowSecondList" :key="classification.kcaId" @click="knowSelectClassificationTwo(classification.kcaId, classification.kcaTitle)">
                                        <van-cell :title="classification.kcaTitle" border :class="{'cur': selectClassificationTwo === classification.kcaId}">
                                            <template #right-icon >
                                                <van-icon name="success" class="cur" v-if="selectClassificationTwo === classification.kcaId" />
                                            </template>
                                        </van-cell>
                                    </van-cell-group>
                                </div>
                            </template>
                        </van-dropdown-item>
                        <!-- 问题状态 -->
                        <van-dropdown-item :title="typeTitle" v-model="knowType" :options="getStatus" @change="knowSelectStatus()"/>
                    </van-dropdown-menu>
                </div>
                <div style="height: calc(100% - 50px);" class="body-content" :class="{'height-100' : total === 0}">
                    <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                        <van-list
                        v-model="isLoading"
                        :finished="finished"
                        :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                        loding-text="loading"
                        @load="getDataList"
                        style="padding-bottom: 56px;"
                        >
                            <div v-bind:class="{'height100' : total === 0}">
                                <ul class="white-bg module-list-09">
                                    <li v-for="know in knowList" :key="know.id" @click="detatilJump(know.queType, know.id)">
                                        <p class="font-size17">{{ know.title }}</p>
                                        <div class="color999" style="margin-top: 8px;">
                                            <span>{{ know.createTime | formTime('splitTime') }}</span><em class="point"></em><span>{{ $t("know_from") }}{{ know.usrDisplayBil }}</span><em class="point" v-if="know.queBounty > 0"></em><span v-if="know.queBounty > 0">{{ $t("know_bounty") }}{{ know.queBounty }}</span>
                                            <!-- 来自/悬赏积分 -->
                                        </div>
                                        <div class="font-size14 color666 word-clamp-3" style="margin-top: 15px;" v-if="know.ansUser">{{ know.ansUser.usrDisplayBil }}：{{ know.knowAnswer.ansContent }}</div>
                                        <div style="margin-top: 15px;">
                                        <span class="color-box" v-bind:class="{'bgcolor-red': know.queType === 'UNSOLVED', 'bgcolor-green': know.queType === 'SOLVED'|| know.queType === 'UNSOLVED'}" v-if="know.askNum > 30 ">{{ knowListStatus[know.queType]}}</span>
                                            <span class="color-box" v-bind:class="{'bgcolor-red': know.queType === 'UNSOLVED', 'bgcolor-green': know.queType === 'SOLVED'}" v-if="know.askNum == null  ">{{ List_knowledge[know.queType]}}</span>
                                            <span class="color-box" v-bind:class="{'bgcolor-red': know.queType === 'UNSOLVED', 'bgcolor-green': know.queType === 'SOLVED'}" v-if="know.askNum != null && know.askNum < 30">{{ Lists_knowledge[know.queType]}}</span>
                                            <span class="color-box" v-if="know.queType === 'SOLVED' " style="margin-left: 5px;">{{ $t("know_popular") }}</span>
                                            <span v-if="know.knowCatalog"><i class="tag-icon"></i><span class="font-size11 color999">{{ know.knowCatalog.title }}</span></span>
                                            <span class="font-size11 color999" style="margin-left: 10px;">{{ know.askNum ? know.askNum : 0 }}{{ know.askNum > 1 ? $t("know_reply_num_2") : $t("know_reply_num") }}</span>
                                        </div>
                                    </li>
                                </ul>
                                <div class="bottom-shadow" style="height: 1px;margin-top: -1px;" v-if="total > 0"></div>
                                <!--暂无数据-->
                                <div v-if="!isLoading && total === 0" style="height:100%;">
                                    <div class="box-table" style="width:100%;height:100%;">
                                        <div class="box-table-cell" style="text-align: center;">
                                            <div class="no-data">
                                                <img src="../../../static/images/no-data.png" alt=""/>
                                                <p class="color999">{{ $t('no_data') }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </van-list>
                    </van-pull-refresh>
                </div>
            </div>
        </div>
        <router-link tag="div" class="add-icon-box" to="/addQuestion">
            <i class="add-icon"></i>
        </router-link>
        <common-loading :isLoading="isLoading"></common-loading>
    </div>
</template>

<script>
export default {
    name: 'KnowList',
    data() {
        return {
            onFetching: false, //滚动到底部
            isTop: false,
            pageNo: 1, //分页页码
            knowList: [],
            total: 0,
            knowClassifications: [], //问题分类
            knowSecondList: [], //二级分类
            knowClassificationType: 'CATALOG', //问题分类默认一级分类
            knowClassification: '0', //问题分类默认
            primaryClassification: false, //一级分类
            secondaryClassification: false, //二级分类
            selectClassificationOne: '', //一级问题分类
            selectClassificationTwo: '', //二级问题分类
            selectClassificationOneTitleId: '', //二级分类的一级id
            selectClassificationTwoOne: false, //二级问题分类的一级分类
            keepClassificationOneId: 0, //保存一级分类的id
            knowStatusNum: {}, //问题状态的总数
            knowType: 'all', //问题状态默认
            selectStatus: null, //问题状态
            getStatus: [
                {value: 'all', text: this.$t('type_all_title')}, //全部
                // {type: 'POPULAR', value: this.$t('know_popular')}, //精选
                // {type: 'UNSOLVED', value: this.$t('know_wait')}, //待解决
                // {type: 'SOLVED', value: this.$t('know_anwsered')}, //已解决
                {value: 'POPULAR', text: this.$t('know_remen')}, //热门问答
                {value: 'WAITING', text: this.$t('know_ing')}, //等你来答
                {value: 'FAQ', text: this.$t('know_faq')} //FAQ
            ],
            types: {
                All: this.$t('type_all_title'),
                POPULAR: this.$t('know_remen'),
                WAITING: this.$t('know_ing'),
                FAQ: this.$t('know_faq')
            },
            knowListStatus: {
                // UNSOLVED: this.$t('know_wait'), //待解决
                // SOLVED: this.$t('know_anwsered'), //已解决
                UNSOLVED: this.$t('know_remen'), //待解决
                SOLVED: this.$t('know_remen'), //已解决
                FAQ: this.$t('know_faq') //FAQ
            },
            List_knowledge: {
                UNSOLVED: this.$t('know_ing'), //待解决
                SOLVED: this.$t('know_anwsered'), //已解决
                FAQ: this.$t('know_faq') //FAQ
            },
            Lists_knowledge: {
                UNSOLVED: this.$t('know_wait'),
                SOLVED: this.$t('know_anwsered'), //已解决
                FAQ: this.$t('know_faq') //FAQ
            },
            backUrl: '',
            primaryTitle: '', //一级标题
            isLoading: true,
            finished: false,
            isRefresh: false,
            encIdWb: '',
            typeTitle: this.$t('know_ask_que_status')
        };
    },
    methods: {
        init() {
            this.onFetching = false;
            this.isTop = false;
            this.pageNo = 1;
            this.knowList = [];
            this.total = 0;
            this.knowClassifications = [];
            this.knowSecondList = [];
            this.knowClassificationType = 'CATALOG';
            this.knowClassification = '0';
            this.primaryClassification = false;
            this.secondaryClassification = false;
            this.selectClassificationOne = '';
            this.selectClassificationTwo = '';
            this.selectClassificationOneTitleId = '';
            this.selectClassificationTwoOne = false;
            this.keepClassificationOneId = 0;
            this.knowStatusNum = {};
            this.knowType = '';
            this.selectStatus = null;
            this.backUrl = '';
            this.primaryTitle = this.$t('know_ask_que_classify');
            //问题状态的总数
            // this.$axios({
            //     method: 'POST',
            //     url: '/app/know/main/json'
            // }).then((res) => {
            //     this.knowStatusNum = res.data;
            // });
            //问题分类
            this.getClassificationList(); //一级分类点击
            this.getDataList('refresh');
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getDataList('refresh');
                this.isRefresh = false;
            }, 900);
        },
        hideViewBox(num) {
            this['isShow' + num] = false;
        },
        selectedClick1() {
            this.primaryClassification = true;
            this.secondaryClassification = false;
        },
        getDataList(option) { //列表请求方法
            if (this.pageNo === 1) {
                option = 'refresh';
            }
            this.$axios({
                method: 'POST',
                // url: '/app/know/allKnow/que/' + this.knowType + '/' + this.knowClassification,
                url: `/app/api/trainee/know/list/page`,
                params: {
                    pageNo: this.pageNo
                },
                data: {
                    queType: this.knowType.toUpperCase(),
                    catalogId: parseInt(this.knowClassification),
                    ancestorId: parseInt(this.keepClassificationOneId)
                }
            }).then((res) => {
                // if (res.data.rows.length !== 0) {
                //     if (option && option === 'refresh') {
                //         this.knowList = res.data.rows;
                //     } else {
                //         this.knowList = [...this.knowList, ...res.data.rows];
                //     }
                // }
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.knowList = res.data.results;
                    } else {
                        this.knowList = [...this.knowList, ...res.data.results];
                    }
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.knowList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        //问题状态点击
        knowSelectStatus() {
            this.isLoading = true;
            this.typeTitle = this.types[this.knowType];
            this.knowList = [];
            this.pageNo = 1;
            this.getDataList();
        },
        //一级分类
        getClassificationList() {
            this.$axios({
                method: 'GET',
                // url: '/app/know/allKnow/kca/' + this.knowClassificationType + '/' + this.knowClassification
                url: `/app/api/trainee/know/kca/` + this.knowClassificationType + '/' + parseInt(this.knowClassification)
            }).then((res) => {
                this.knowClassifications = res.data;
            });
        },
        //分类“全部”按钮
        knowSelectClassifyAll() {
            this.isLoading = true;
            this.knowList = [];
            this.pageNo = 1;
            this.knowClassificationType = 'CATALOG';
            this.knowClassification = '0';
            this.selectClassificationOne = '0';
            this.selectClassificationTwo = '';
            this.keepClassificationOneId = '0';
            this.primaryTitle = this.$t('type_all_title');
            this.getDataList();
            this.$refs.queRef.toggle(false);
        },
        /*一级点击分类*/
        knowSelectClassificationOne(ClassificationId, listTotal, title) {
            this.isLoading = true;
            this.knowClassification = ClassificationId;
            if (listTotal > 0) {
                this.$refs.queRef.toggle(true);
                this.primaryClassification = false;
                this.secondaryClassification = true;
                this.primaryTitle = title;
                this.getsecondList(ClassificationId);
            } else {
                if (this.selectClassificationTwo !== '') {
                    this.selectClassificationTwo = '';
                }
                this.selectClassificationOne = ClassificationId;
                this.selectClassificationTwoOne = true; //在二级分类点击的一级分类
                this.selectClassificationOneTitleId = ClassificationId; //在二级分类页点击一级分类，保存其id
                this.primaryTitle = title;
                this.knowList = [];
                this.pageNo = 1;
                this.getDataList();
                this.$refs.queRef.toggle(false);
            }
        },
        /*二级点击分类*/
        knowSelectClassificationTwo(ClassificationId, title) {
            this.isLoading = true;
            this.knowClassification = ClassificationId;
            this.selectClassificationTwo = ClassificationId;
            this.selectClassificationOne = this.keepClassificationOneId; //保存一级分类的id，在一级分类页为蓝色字体
            this.primaryTitle = title;
            this.knowList = [];
            this.pageNo = 1;
            this.getDataList();
            this.$refs.queRef.toggle(false);
        },
        /*二级分类显示列表*/
        getsecondList(Id) {
            this.$axios({
                method: 'GET',
                // url: `/app/know/allKnow/kca/NORMAL/${Id}`
                url: `/app/api/trainee/know/kca/NORMAL/${Id}`
            }).then((res) => {
                this.knowSecondList = res.data;
                this.keepClassificationOneId = Id; //保存一级分类的id
                this.isLoading = false;
            });
        },
        /*返回上一级*/
        backToPrevious() {
            this.secondaryClassification = false;
            this.knowClassifications = [];
            this.primaryClassification = true;
            this.knowClassificationType = 'CATALOG';
            this.knowClassification = '0';
            this.pageNo = 1;
            this.getClassificationList();
        },
        detatilJump(type, id) {
            this.$router.push({path: `/knowDetail/${type}/${id}`});
        },
        backToFind() {
            if (window.localStorage.getItem('loginUser')) {
                this.encIdWb = this.wbEncryptor(window.localStorage.getItem('loginUser'));
            } else {
                this.$axios({
                    method: 'GET',
                    url: '/app/api/user/current'
                }).then(res => {
                    this.encIdWb = this.wbEncryptor(res.data.usrEntId);
                });
            }
            this.$store.commit('removeKeepAliveList', 'KnowIndex');
            if (window.localStorage.getItem('formUrl') === '1') {
                window.localStorage.removeItem('formUrl');
                this.$router.push(`/`);
            } else {
                window.localStorage.removeItem('formUrl');
                this.$router.push(`/find/${this.encIdWb}`);
            }
        }
    },
    mounted() {
        let $knowlist = document.getElementById('knowList');
        let $myQuestion = document.getElementById('myQuestion');
        let $myHelpQuestion = document.getElementById('myHelpQuestion');
        if ($knowlist) {
            $knowlist.classList.add('weui-bar__item_on');
        }
        if ($myQuestion) {
            $myQuestion.classList.remove('weui-bar__item_on');
        }
        if ($myHelpQuestion) {
            $myHelpQuestion.classList.remove('weui-bar__item_on');
        }
        this.init();
    },
    activated() {
        // if (this.$route.params.isReload && !this.firstEnter) {
        this.init();
        // }
    }
    // beforeRouteEnter(to, from, next) {
    //     next(_this => {
    //         document.getElementById('knowList').classList.add('weui-bar__item_on');
    //         document.getElementById('myQuestion').classList.remove('weui-bar__item_on');
    //         document.getElementById('myHelpQuestion').classList.remove('weui-bar__item_on');
    //     });
    // }
};
</script>

<style scoped lang="less">
    .cur {
        color: rgb(7, 94, 187);
    }
    /deep/.van-button--plain.van-button--info{
      color: #075ebb;
    }
    /deep/.van-nav-bar__content .van-nav-bar__title {
        max-width: 80%;
        width: 80%;
        margin-left: 50px;
    }
</style>
